<template>
    <div class="commission page">
        <div class="content">
            <div class="commissionTop">
                <div class="topImg"><img :src="user.userEntity.avatar"/></div>
                <div class="topMsg">
                    <div class="msgName">{{user.userEntity.name}}</div>
                    <div class="msgMobile">手机: {{user.userEntity.mobile}}</div>
                    <div class="msgFans">
                        <span>总推广: {{user.agentNum}}</span>
                        <span style="margin-left:0.40rem">总粉丝: {{user.fansNum}}</span>
                    </div>
                </div>
                <!--<div class="topBtn">修改月份</div>-->
                <cube-button class="topBtn" @click="showDatePicker">修改月份</cube-button>
            </div>
            <div class="commissionAmount">
                <div class="amountItem">
                    <div class="amountItemMoney">
                        <span class="integer">{{total}}</span>
                    </div>
                    <div class="amountItemDescribe">
                        <div>返利总金额</div>
                        <div>(元)</div>
                    </div>
                </div>
                <div class="division">|</div>
                <div class="amountItem">
                    <div class="amountItemMoney">

                        <span class="integer">{{totalWait}}</span>
                    </div>
                    <div class="amountItemDescribe">
                        <div>待审核佣金</div>
                        <div>(元)</div>
                    </div>
                </div>
                <div class="division">|</div>
                <div class="amountItem">
                    <div class="amountItemMoney">

                        <span class="integer">{{totalDown}}</span>
                    </div>
                    <div class="amountItemDescribe">
                        <div>已到账佣金</div>
                        <div>(元)</div>
                    </div>
                </div>

                <!--                <div class="division">|</div>-->
                <!--                <div class="amountItem">-->
                <!--                    <div class="amountItemMoney">-->
                <!--                        <span class="integer" style="visibility:hidden">0.00</span>-->
                <!--                    </div>-->
                <!--                    <div class="amountItemDescribe">-->
                <!--                        <div>已提现</div>-->
                <!--                        <div>(元)</div>-->
                <!--                    </div>-->
                <!--                </div>-->
            </div>
            <div class="userForm">
                <table class="form">
                    <tr class="formHead">
                        <th>时间</th>
                        <th>订单信息</th>

                        <th>电话号码</th>
                        <th>返点金额</th>
                        <!--<th>备注</th>-->
                    </tr>
                    <tr class="formItem" v-for="item of userForm" :key="item.index">
                        <td class="time">{{item.time}}</td>
                        <td class="money">{{item.info}}</td>
                        <td class="tel">{{item.mobile}}</td>
                        <td class="rebate">{{item.income}}元</td>
                        <!--<td class="remark">{{item.remark}}</td>-->
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
    // import {info} from "../../api/user"
    import {searchCommission, searchFansNum} from "../../api/commission"

    export default {
        name: "index",
        data() {
            return {
                selectedYear: '',
                selectedMonth: '',
                user: {
                    userEntity: {
                        avatar: ''
                    }
                },
                userForm: [],
                totalDown: '',
                totalWait: '',
                total: ''
            }
        },
        activated() {
            // info().then(res=>{
            //     this.user = res.data
            // })
            searchFansNum().then(res => {
                this.user = res.data
                this.totalDown = res.data.totalDone
                this.totalDown = this.totalDown.toFixed(2)
                this.totalWait = Number(res.data.totalWait).toFixed(2)
                this.total = Number(this.totalDown) + Number(this.totalWait)
            })
        },
        mounted() {
            // let nowData = new Date()
            // this.selectedYear = nowData.getFullYear()
            // this.selectedMonth = nowData.getMonth()+1
            // setTimeout(()=>{
            this.searchCommission()
            // },500)
        },
        computed: {},
        methods: {
            showDatePicker() {
                let nowData = new Date()
                if (!this.datePicker) {
                    this.datePicker = this.$createDatePicker({
                        title: '选择月份',
                        min: new Date(2018, 1),
                        max: new Date(nowData.getFullYear(), nowData.getMonth()),
                        value: nowData,
                        columnCount: 2,
                        onSelect: this.selectHandle,
                        /*onCancel: this.cancelHandle*/
                    })
                }

                this.datePicker.show()
            },
            selectHandle(date, selectedVal, selectedText) {
                this.selectedYear = selectedVal[0]
                this.selectedMonth = selectedVal[1]
                this.$createDialog({
                    type: 'warn',
                    content: `将日期修改为${selectedVal.join('年')}月成功`
                }).show()
                this.searchCommission()
            },
            /*cancelHandle() {
                this.$createToast({
                    type: 'correct',
                    txt: 'Picker canceled',
                    time: 1000
                }).show()
            }*/
            async searchCommission() {
                let year = this.selectedYear
                let month = this.selectedMonth
                const {data: res} = await searchCommission(year, month)
                this.userForm = res
            }
        }
    }
</script>

<style scoped lang="stylus">
    .commission
        width 10.00rem
        background url("../../assets/redbg.png") no-repeat
        background-size 10.00rem 4.80rem
        padding-top 0.61rem
        /*padding 0 0.40rem*/
        height 100vh

        .content
            width 9.20rem
            margin 0 auto

        .commissionTop
            width 100%
            height 1.63rem
            display flex
            justify-content space-between
            align-items center

            .topImg
                width 1.63rem
                height 1.63rem
                border-radius 50%

                img
                    width 100%
                    height 100%
                    border-radius 50%
                    border 1px solid #F22700

            .topMsg
                color #FFFFFF
                height 100%
                display flex
                flex-direction column
                align-items left
                justify-content space-between
                margin-right 0.53rem
                /*align-items center*/

                .msgName
                    font-size 0.45rem

                .msgMobile
                    font-size 0.29rem

                .msgFans
                    font-size 0.29rem

            .topBtn
                color #F2270C
                font-size 0.33rem
                padding 0 0.40rem
                background-color #fff
                height 0.67rem
                display flex
                align-items center
                border-radius 0.33rem
                width auto

        .commissionAmount
            /*width 100%*/
            height 2.48rem
            border-radius 0.20rem
            background-color #fff
            box-shadow 0 0 0.01rem #F2270C
            margin-top 0.67rem
            display flex
            padding 0 0.27rem
            justify-content space-between
            align-items center

            .amountItem
                .amountItemMoney
                    display flex
                    justify-content center
                    align-items flex-end
                    color #333333

                    .integer
                        font-size 0.53rem
                        font-weight bold

                    .decimal
                        display table-cell
                        vertical-align bottom
                        font-size 0.32rem
                        line-height 0.32rem
                        height 0.32rem

                .amountItemDescribe
                    margin-top 0.25rem
                    color #999999
                    font-size 0.29rem

                    div
                        display flex
                        justify-content center
                        white-space nowrap

            .division
                width 0.03rem
                height 0.40rem
                color #D4D4D4
                font-size 0.40rem

        /*margin 0 0.40rem*/

        .form
            margin-top 0.67rem
            width 100%

            .formHead
                background-color #F55742
                color #fff
                font-size 0.35rem
                height 1.41rem
                padding 0 0.20rem

                th
                    height 100%
                    padding 0.53rem 0.27rem
                    vertical-align middle

            .formItem
                color #333333
                font-size 0.27rem
                height 1.33rem
                padding 0 0.20rem
                width 100%
                background-color rgba(153, 153, 153, .1)
                border-top 0.05rem solid #fff

                td
                    height 1.33rem
                    text-align center
                    vertical-align middle

                .time
                    width 0.76rem

                .tel
                    width 2.05rem

                .name
                    width 1.48rem

                .money
                    width 0.63rem

                .rebate
                    width 0.79rem

                .remark
                    width 1.04rem

</style>
